// webpack是基于Node进行构建的，webpack的配置文件中，任何合法的Node代码都是支持的
const path = require('path');
// 根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle.js写入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');


module.exports = {
    mode:'development',
    entry: path.join(__dirname, './src/main.js'), // 入口文件
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            { 
                test: /\.css$/, 
                use: ['style-loader', 'css-loader'] 
            },
            { 
                test: /\.less$/, 
                use: ['style-loader', 'css-loader', 'less-loader'] 
            }, 
            { 
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: {
                    loader:'url-loader',
                    options:{
                        esModule: false,
                        limit: 10240,
                        name:'[name].[ext]-[hash:8]'
                    }
                }
            }, // 处理图片路径的loader
            { 
                test: /\.(ttf|eot|svg|woff|woff2)$/, 
                use: 'url-loader' 
            },
            { 
                test: /\.vue$/, 
                use: 'vue-loader' 
            }// 处理 .vue文件的loader 
            
    ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html' // 设置生成的内存页面的名称
        }),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    resolve: {
        alias: { // 修改Vue被导入时包的路径
          "vue$": "vue/dist/vue.js"
        }
    },
    devServer: {
        open:true,
        port:3000,
        // contentBase:'./dist',
        historyApiFallback: true,
        proxy: {
            '/api/getlunbo':{
                target: 'http://vue.studyit.io/api/getlunbo',  // 代理跨域目标接口
                changeOrigin: true,
                secure: false// 接受运行在https上的服务
                // pathRewrite:{
                //     '/vueapi':''
                // }
            }  
        },
    }
}